<template>
	<view class="goods_square" @tap="toDetail">
		<view>
			<view class="goods_square_img">
				<image mode="widthFix" :src="item.productSquareUrl" />
			</view>
			<view class="goods_square_desc">
				<view class="goods_square_desc_title">{{ item.productShortName }}</view>
				<view class="goods_square_desc_price">
					<view class="current_price">
						<span>¥</span>
						<span class="current_price_title">{{ item.currentPrice }}</span>
					</view>
					<view class="origin_price">￥{{ item.originalPrice }}</view>
				</view>
			</view>
			<view class="buynow">
				<image class="buynow_cart" src="../../../static/img/common/index_cart.png"></image>
				立即抢购
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	props: {
		item: {
			type: Object,
			default: {
				productIconUrl: []
			},
		},
	},
	mounted() {
	},
	onLoad() {

	},
	methods: {
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/goodsDetail/index?productId=' + this.item.productId,
			})
		},
	}
}
</script>

<style scoped>
.goods_square {
	margin-bottom: 15rpx;
	padding: 10rpx 5rpx 5rpx;
}

.goods_square_img {
	text-align: center;
	margin-bottom: 10rpx;
}

.goods_square_img image {
	width: 310rpx;
	border-radius: 20rpx;
}

.goods_square_desc_title {
	/* word-break: break-all; */
	font-size: 26rpx;
	color: #333333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 43vw;
	margin: 8rpx 0;
	padding-left: 10rpx;
}

.goods_square_desc_price {
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.origin_price {
	font-size: 18rpx;
	font-weight: 500;
	color: #999999;
	text-decoration: line-through;
}

.current_price {
	font-size: 20rpx;
	font-weight: bold;
	color: #f25500;
	margin-right: 20rpx;
}

.current_price_title {
	font-size: 30rpx;
}

.buynow {
	width: 164rpx;
	height: 43rpx;
	/* background: linear-gradient(90deg, #FF4543 0%, #FF6402 99%); */
	background-color: #0F4C97;
	border-radius: 21rpx;
	margin: 10rpx auto 5rpx;
	text-align: center;
	line-height: 43rpx;
	color: #fff;
	font-size: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.buynow_cart {
	width: 28rpx;
	height: 26rpx;
	margin-right: 5rpx;
}
</style>
